<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="../common/js/jquery.min.js"></script>
    <!--<link href="../common/css/iconfont-embedded.css" rel="stylesheet" type="text/css" />-->
    <link rel="stylesheet" href="../common/css/animate.min.css"/>
    <link rel="stylesheet" href="../css/livethree.css"/>
    <script src="../common/js/swiper.min.js"></script>
    <link rel="stylesheet" href="../common/css/swiper.min.css"/>
    <title></title>
</head>
<body>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide live-page1-wrap">
            <img class="animated fadeIn" src="http://res.alltuu.com/static/images/flashpass/1.jpg" alt=""/>
            <h1 class="animated fadeIn">闪传 图片直播专利技术</h1>
            <h4 class="animated fadeIn">轻量级直播时代：一位摄影师+一台相机即可轻松实现</h4>
            <div class="animated fadeIn">
                <video src="" preload="" controls="" poster="http://res.alltuu.com/static/media/final_file01.png"></video>
            </div>
            <p class="animated fadeIn">
                <button>企业合作申请</button>
                <button>成为闪传摄影师</button>
            </p>
        </div>
        <div class="swiper-slide live-page2-wrap">
            <h1 class="animated fadeIn">摄影科技迎来全新变革</h1>
            <h3 class="animated fadeIn">同质化竞争时代，用创新手段让你的拍摄脱颖而出</h3>
            <div class="page2-main-wrap">
                <div class="page2-wrap animated bounce" style="left:90px;animation-delay: 0.6s;">
                    <i class="iconfont icon-ycl"></i>
                    <div class="page2-sml animated zoomIn">
                        <h3>专业拍摄</h3>
                        <p>数千位专业摄影师</p>
                        <p>遍布全国100+城市地区</p>
                    </div>
                </div >
                <div class="animated bounce page2-wrap " style="left: 500px;animation-delay: 0.9s">
                    <div class="page2-sml  animated zoomIn">
                        <h3>云处理</h3>
                        <p>后台专业团队协作</p>
                        <p>1分钟完成图片筛选和美化</p>
                    </div>
                </div >
                <div class="animated bounce page2-wrap" style="left:910px;animation-delay: 1.2s">
                    <div class="page2-sml animated zoomIn">
                        <h3>互动传播</h3>
                        <p>下载、点评、分享</p>
                        <p>还能在线生成图文报道</p>
                    </div>
                </div >
                <div class="animated bounce page2-wrap" style="left: 295px; top: 180px;animation-delay: 1.5s">
                    <div class="page2-sml animated zoomIn">
                        <h3>分类秒存</h3>
                        <p>照片拍摄5秒后传至云端</p>
                        <p>分类和存储一步到位</p>
                    </div>
                </div >
                <div class="animated bounce page2-wrap" style="left: 705px; top: 180px;animation-delay: 1.8s">
                    <div class="page2-sml animated zoomIn">
                        <h3>全网直播</h3>
                        <p>公众号端或网址链接植入</p>
                        <p>容纳数百万人同时观看</p>
                    </div>
                </div >
                <div class="page2-line animated fadeIn" style="left: 295px"></div>
                <div class="page2-line animated fadeIn" style="left: 500px"></div>
                <div class="page2-line animated fadeIn" style="left: 705px"></div>
                <div class="page2-line animated fadeIn" style="left: 910px"></div>
            </div>
        </div>
        <div class="swiper-slide live-page3 poi">
                <h1>热门应用：婚礼直播</h1>
                <h3>图片直播在各种活动广泛应用：体育赛事、新闻报道、商品发布、旅行跟拍、会议直播</h3>
                <div class="live-page3-wrap">
                <img src="http://res.alltuu.com/static/images/flashpass/ditu.png" alt=""/>
                <div class="live-page3-big"></div>
                <div class="live-page3-sml live-page3-sml1">
                <div class="animated zoomIn">
                <p>我在莫斯科></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml2">
                <div class="animated zoomIn">
                <p>我在东京></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml3">
                <div class="animated zoomIn">
                <p>我在哥本哈根></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml4">
                <div class="animated zoomIn">
                <p>我在渥太华></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml5">
                <div class="animated zoomIn">
                <p>我在悉尼></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml6">
                <div class="animated zoomIn">
                <p>我在阿拉斯加></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml7">
                <div class="animated zoomIn">
                <p>我在巴西利亚></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml8">
                <div class="animated zoomIn">
                <p>我在加利福尼亚></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml9">
                <div class="animated zoomIn">
                <p>我在加德满都></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml10">
                <div class="animated zoomIn">
                <p>我在多多马></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml11">
                <div class="animated zoomIn">
                <p>我在新德里></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-sml live-page3-sml12">
                <div class="animated zoomIn">
                <p>我在吉隆坡></p>
                <p>见证你的幸福</p>
                </div>
                </div>
                <div class="live-page3-line live-page3-line1"></div>
                <div class="live-page3-line live-page3-line2"></div>
                <div class="live-page3-line live-page3-line3"></div>
                <div class="live-page3-line live-page3-line4"></div>
                <div class="live-page3-line live-page3-line5"></div>
                <div class="live-page3-line live-page3-line6"></div>
                <div class="live-page3-line live-page3-line7"></div>
                <div class="live-page3-line live-page3-line8"></div>
                <div class="live-page3-line live-page3-line9"></div>
                <div class="live-page3-line live-page3-line10"></div>
                <div class="live-page3-line live-page3-line11"></div>
                <div class="live-page3-line live-page3-line12"></div>
                </div>
        </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>
    <!--
    <!--<div class="live-page4 poi">Slide 4</div>-->
    <!--<div class="live-page5 poi">Slide 5</div>-->

</body>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        direction: 'vertical',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        mousewheelControl: true
    });
    console.log($("li").length)
    $(".uls li").each(function(index){
        $(this).click(function(){
            $(".uls li").css("background","");
            $(this).css("background","#2db9ff");
        })
    })
    $(".page2-wrap").each(function(index){
        $(this).mousemove(function(){
            $(".page2-sml").eq(index).show();
        })
        $(this).mouseleave(function(){
            $(".page2-sml").hide();
        })
    })
    $(".live-page3-sml").each(function(index){
        $(this).mousemove(function(){
            $(".live-page3-sml div").eq(index).show()
        })
        $(this).mouseleave(function(){
            $(".live-page3-sml div").hide();
        })
    })
</script>
</html>